<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>旅游精选</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
		<!--bootsrtap依赖jquery-->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!--bootsrtap依赖的js插件-->
		<script src="bootstrap/js/bootstrap.min.js"></script>
		
		<style type="text/css">
			.paddingTop{
				padding-top: 15px;
			}
			.search_input{
				width: 200px;
				height: 35px;
				border: 2px solid #FFc900;
				float: left;
				padding-left: 5px;
				font-size: 15px;
				margin-top: 15px;
			}.search_a{
				width: 70px;
				height: 35px;
				border: 1px solid #FFC900;
				background-color: #FFC900;
				font-size: 15px;
				float: left;
				text-align: center;
				line-height: 35px;
				margin-top: 15px;	
			}
			.jx{
				border-bottom:2px solid #FFc900;
				margin-top: 5px;
			}
			.company{
				text-align: center;
				height: 40px;
				background-color: #FFC900;
				line-height: 40px;
				font-size: 8px;
			}
		</style>
	</head>
	<body>
		<!--1:页眉部分-->
		<header class="container-fluid">
			<div class="row">
				<img src="img/top_banner.jpg" class="img-responsive"/>
			</div>
			<div class="row paddingTop">
				<div class="col-md-3">
					<img src="img/logo.jpg" class="img-responsive"/>
				</div>
				<div class="col-md-5">
					<input type="text" placeholder="请输入线路名称" class="search_input"/>
					<a href="#" class="search_a"> 搜索 </a>
				</div>
				<div class="col-md-4">
					<img src="img/hotel_tel.png" class="img-responsive"/>
				</div>
			</div>
			<!--导航-->
			<div class="row">
				<nav class="navbar navbar-default">
				  <div class="container-fluid">
				     <!-- 指定商标和开关的样式，让它在手机上更好的显示-->
	                <div class="navbar-header">
	                    <!--开关按钮-->
	                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
	                        <span class="glyphicon glyphicon-th-list" style="color: white"></span>
	                    </button>
	                    <a class="navbar-brand" href="#">传智旅游</a>
	                </div>
	                
	                     <!-- 下拉菜单，表单等-->
	                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	                    <ul class="nav navbar-nav">
	                        <li class="active"><a href="#">北京 <span class="sr-only">(current)</span></a></li>
	                        <li><a href="#">河南</a></li>
	                        <li><a href="#">浙江</a></li>
	                        <li><a href="#">江苏</a></li>
	                        <li><a href="#">天津</a></li>
	                        <li><a href="#">上海</a></li>
	                        <li><a href="#">广东</a></li>
	                        <li><a href="#">山东</a></li>
	                        <li><a href="#">河北</a></li>
	                        <li><a href="#">湖北</a></li>
	                        <li><a href="#">湖南</a></li>
	                    </ul>
	                </div><!-- /.navbar-collapse -->
				  </div><!-- /.container-fluid -->
				</nav>
			</div>
			<!--第四行：轮播图-->
			<div class="row">
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					  <!-- Indicators -->
					  <ol class="carousel-indicators">
					    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
					  </ol>
					
					  <!-- Wrapper for slides -->
					  <div class="carousel-inner" role="listbox">
					    <div class="item active">
					      <img src="img/banner_1.jpg" alt="...">
					      <div class="carousel-caption">
					        	秦岭
					      </div>
					    </div>
					    <div class="item">
					      <img src="img/banner_2.jpg" alt="...">
					      <div class="carousel-caption">
					        ...
					      </div>
					    </div>
					    <div class="item">
					      <img src="img/banner_3.jpg" alt="...">
					      <div class="carousel-caption">
					        ...
					      </div>
					    </div>
					  </div>
					
					  <!-- Controls -->
					  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					    <span class="sr-only">Previous</span>
					  </a>
					  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					    <span class="sr-only">Next</span>
					  </a>
					</div>
			</div> 
		</header>
		<!--2：中间部分-->
		<div class="container">
			<div class="row jx">
				<img src="img/icon_5.jpg"/>
				<span>黑马精选</span>
			</div>
			<div class="row">
				<div class="col-md-3">
					<div class="thumbnail">
		                <img src="img/jiangxuan_1.jpg" alt="...">
		                <div class="caption">
		                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
		                    <span style="color: red">&yen;888</span>
		                </div>
		            </div>
				</div>
				<div class="col-md-3">
					<div class="thumbnail">
		                <img src="img/jiangxuan_1.jpg" alt="...">
		                <div class="caption">
		                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
		                    <span style="color: red">&yen;888</span>
		                </div>
		            </div>
				</div>
				<div class="col-md-3">
					<div class="thumbnail">
		                <img src="img/jiangxuan_1.jpg" alt="...">
		                <div class="caption">
		                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
		                    <span style="color: red">&yen;888</span>
		                </div>
		            </div>
				</div>
				<div class="col-md-3 paddingTop">
					<div class="thumbnail">
		                <img src="img/jiangxuan_1.jpg" alt="...">
		                <div class="caption">
		                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
		                    <span style="color: red">&yen;888</span>
		                </div>
		            </div>
				</div>
			</div>
			<div class="row jx">
					<img src="img/icon_6.jpg"/>
					<span>国内游</span>
			</div>
			<div class="row paddingTop" >
				<div class="col-md-4">
					 <img src="img/guonei_1.jpg"/>
				</div>
				<div class="col-md-8">
					<div class="row">
						<div class="col-md-4 ">
							<div class="thumbnail">
				                <img src="img/jiangxuan_2.jpg" alt="...">
				                <div class="caption">
				                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
				                    <span style="color: red">&yen;888</span>
				                </div>
				            </div>
						</div>
						<div class="col-md-4 ">
							<div class="thumbnail">
				                <img src="img/jiangxuan_2.jpg" alt="...">
				                <div class="caption">
				                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
				                    <span style="color: red">&yen;888</span>
				                </div>
				            </div>
						</div>
						
						<div class="col-md-4 ">
							<div class="thumbnail">
				                <img src="img/jiangxuan_2.jpg" alt="...">
				                <div class="caption">
				                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
				                    <span style="color: red">&yen;888</span>
				                </div>
				            </div>
						</div>
						
					</div>
					<div class="row">
						<div class="col-md-4 ">
							<div class="thumbnail">
				                <img src="img/jiangxuan_2.jpg" alt="...">
				                <div class="caption">
				                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
				                    <span style="color: red">&yen;888</span>
				                </div>
				            </div>
						</div>
						<div class="col-md-4 ">
							<div class="thumbnail">
				                <img src="img/jiangxuan_2.jpg" alt="...">
				                <div class="caption">
				                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
				                    <span style="color: red">&yen;888</span>
				                </div>
				            </div>
						</div>
						<div class="col-md-4 ">
							<div class="thumbnail">
				                <img src="img/jiangxuan_2.jpg" alt="...">
				                <div class="caption">
				                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
				                    <span style="color: red">&yen;888</span>
				                </div>
				            </div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
		<!--3：页脚部分-->
		<footer class="container-fluid">
			<div class="row">
				<img src="img/footer_service.png" class="img-responsive"/>
			</div>
			<div class="row company">
				 江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
			</div>
		</footer>
	</body>
</html>
